<!--
* @Description: 异常特征样本
* @Author: tqh
* @Date: 2022-08-31 17:00
-->
<script lang="ts" setup>
import {
  ref,
  reactive,
  onMounted,
  watch,
  getCurrentInstance,
  nextTick,
  unref
} from 'vue';
import { ElMessage, ElMessageBox, FormRules, ElTable } from 'element-plus';
import { getDeptData } from '../../../api/digitalAssets/networkAssets/hostAssets';
import { openSocket, registerSockets } from '@/utils/socket/useSocket';
import { usePermissions } from '../../../composables/usePermissions';
import { useRoute, useRouter } from 'vue-router';
import {
  getList,
  delAll,
  add,
  delOne,
  update,
  queryTargetDetail,
  execute,
  executeByIds,
  pauseDetect,
  cancelDetect,
  detectMode,
} from '../../../api/collection/assetsFound/detectTask';
import { getRemoteScan } from '../../../api/collection/assetsFound/propertyAudit';
import {
  getDictTypeList,
  getDeptList,
  getRecordList,
} from '../../../api/common';
import Dialog from '../components/dialog.vue';
import AddPopUp from '../components/addPopUp.vue';
import { yaConfirmMessage } from 'yuan-plus';
import stop from '@/assets/image/collection/stop.png';
import loading from '@/assets/image/collection/loading.gif';
import end from '@/assets/image/collection/end.png';
import cancel from '@/assets/image/collection/cancel.png';

const visible = ref(false)

const router = useRouter();
const { proxy } = getCurrentInstance();
/**
 * @description: 列表socket
 */
const sockets = {
  message(res) {
    if (res.type == 'ws_detect') {
      const { data, code } = res.data;
      if (code == 200) {
        tableData.value = data.records;
        total.value = data.total;
      }
    }
  },
};
const { permissionsButtons } = usePermissions();
const bottomData = new Map();
const Buttons = ref([]);
onMounted(() => {
  // registerSockets(sockets, proxy);
  init();
  getDictList();
});
/**
 * 按钮权限
 */
let btnPower = () => {
  permissionsButtons.map((item) => {
    bottomData.set(item.menuId, item);
  });
  if (bottomData.has(40013)) {
    Buttons.value.push({
      eventName: 'add',
    });
  }
  if (bottomData.has(400111)) {
    Buttons.value.push({
      eventName: 'delete',
    });
  }
};
// 分页参数
const total = ref(0);
/**
 * @description: 初始化方法
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const init = () => {
  btnPower();
};
// 表格数据
const tableData = ref([]) as any;
const tableColumn: any[] = reactive([
  {
    type: 'selection',
    width: '65px',
    fixed: 'left',
    reserveSelection: true,
  },
  {
    prop: 'name',
    label: '任务名称',
    width: '180px',
    type: 'input',
    search: true,
    rules: true,
    maxLength: 255,
    drawer: true,
  },
  {
    prop: 'detectionRange',
    drawerSlotName: 'detectionRange',
    slotName: 'detectionRangeTable',
    label: '探测范围',
    type: 'select',
    rules: true,
    drawer: true,
    drawValue: 1,
    minWidth: '180px',
    options: [
      {
        label: '自定义',
        value: 1,
      },
      {
        label: '资产地址库',
        value: 2,
      },
    ],
    onChange(e) {
      getEditDrawerData();
      tableColumn.forEach((item) => {
        if (item.prop == 'detectionRange') {
          item.drawValue = '';
        }
        if (item.prop == 'networkArea' || item.prop == 'detectionEngine') {
          item.hide = e == 1 ? false : true;
        }
      });
    },
  },
  {
    prop: 'deptIdSet',
    label: '所属部门',
    tableHide: true,
    type: 'cascader',
    props: {
      checkStrictly: true,
      value: 'id',
      emitPath: false,
    },
    showAllLevels: false,
    drawer: true,
  },
  {
    prop: 'networkArea',
    label: '网络域',
    tableHide: true,
    type: 'select',
    rules: true,
    drawer: true,
    hide: false,
  },
  {
    prop: 'detectionEngine',
    label: '探测引擎',
    tableHide: true,
    type: 'select',
    rules: true,
    drawer: true,
    hide: false,
    multiple: true,
    drawValue: [],
  },
  {
    prop: 'detectionMode',
    label: '探测模式',
    type: 'select',
    rules: true,
    drawer: true,
    tableHide: true,
    eventName: 'detectionMode',
  },
  {
    prop: 'type',
    label: '执行方式',
    width: '180px',
    type: 'select',
    drawerSlotName: 'type',
    drawer: true,
    rules: true,
    onChange(e) {
      formData.value.type = e;
    },
  },
  {
    prop: 'report',
    label: '仅生成扫描报告',
    tableHide: true,
    type: 'checkbox',
    drawer: true,
    options: [
      {
        key: '',
        value: 1,
      },
    ],
  },
  {
    prop: 'fingerprint',
    label: '是否扫描指纹',
    tableHide: true,
    type: 'radio',
    drawer: true,
    drawValue: 1,
    options: [
      {
        key: '否',
        value: 1,
      },
      {
        key: '是',
        value: 2,
      },
    ],
  },
  {
    prop: 'taskDescription',
    label: '任务描述',
    tableHide: true,
    type: 'textarea',
    drawer: true,
    rows: 6,
  },
  {
    prop: 'schedule',
    label: '进度',
    align: 'center',
    minWidth: '180px',
    slotName: 'schedule',
  },
  {
    prop: 'schedule',
    label: '执行状态',
    width: '180px',
    slotName: 'status',
    
    search: true,
    type: 'select'
  },
  {
    prop: 'schedule',
    label: '最新结果',
    width: '180px',
    slotName: 'result',
  },
  {
    prop: 'networkAreaEngine',
    label: '引擎-网络域',
    width: '180px',
    slotName: 'networkAreaEngine',
    search: true,
    type: 'input'
  },
  {
    formItemClassName: 'slotName-no-label',
    drawerSlotName: 'levelHeight',
    tableHide: true,
  },
  {
    showHeight: 'showHeight',
    hide: true,
    prop: 'rate',
    label: '发包速率',
    drawValue: 123,
    isType: 'number',
    type: 'input',
    drawer: true,
    rules: true,
    tableHide: true,
    tooltip:
      '存活探测每秒的发包数，快速模式默认值为10000，标准模式为8000，慢速模式为5000，自定义范围500-200000。',
  },
  {
    showHeight: 'showHeight',
    hide: true,
    prop: 'retry',
    label: '重试次数',
    isType: 'number',
    type: 'input',
    drawer: true,
    rules: true,
    tableHide: true,
    tooltip:
      '代表探测的过程中重新尝试的次数，快速模式默认值0，标准模式为2，慢速模式为3，自定义范围为0-8次。',
  },
  {
    showHeight: 'showHeight',
    hide: true,
    prop: 'interval',
    label: '间隔时间',
    isType: 'number',
    type: 'input',
    drawer: true,
    rules: true,
    tableHide: true,
    tooltip:
      '针对单个IP的发包间隔时间，单位为毫秒（ms），快速模式默认值为100毫秒，标准模式为300毫秒，慢速模式默认值为500毫秒，自定义范围为100-1000毫秒。',
  },
  {
    showHeight: 'showHeight',
    hide: true,
    prop: 'timeout',
    label: '超时时间',
    isType: 'number',
    type: 'input',
    drawer: true,
    rules: true,
    tableHide: true,
    tooltip:
      '代表响应的最大等待时间，单位为秒（s）,快速模式默认值为3秒，标准模式为4秒，慢速默认值为5秒，自定义范围为1-30秒。',
  },
  {
    showHeight: 'showHeight',
    hide: true,
    drawerSlotName: 'levelHeightinfo',
    formItemClassName: 'slotName-no-label1',
    label: 'TCP端口扫描',
    tableHide: true,
    tooltip:
      '标准端口扫描：标准端口扫描测策略扫描目标的已知各种应用、木马等使用的端口；快速端口扫描：扫描1-1024；指定端口范围：端口范围：1-65535，多个端口以英文“,”隔开；建议输入十个端口以内！',
  },
  {
    showHeight: 'showHeight',
    hide: true,
    drawerSlotName: 'tcpPortType',
    formItemClassName: 'slotName-no-label-custom',
    label: 'TCP端口扫描方式',
    tableHide: true,
    tooltip:
      'SYN：推荐选项，通过直接建立完整的TCP连接来判断端口开放情况，此方法快而准确；CONNECT：向目标端口发送SYN包，依据对方是否回复ACK报文来判断端口开放情况；',
  },
  {
    showHeight: 'showHeight',
    hide: true,
    drawerSlotName: 'udpPort',
    formItemClassName: 'slotName-no-label1',
    label: 'UDP扫描端口',
    tableHide: true,
    tooltip: '端口范围：1-65535；多个端口以英文“,”隔开；建议输入十个端口以内！',
  },
  {
    showHeight: 'showHeight',
    hide: true,
    drawerSlotName: 'exploratoryMode',
    formItemClassName: 'slotName-no-label1',
    label: '探活方式',
    tableHide: true,
    tooltip:
      'UDP PING端口：向目标主机发送UDP数据报文，根据目标主机的反应以判断其是否存活；TCP PING端口：向目标主机TCP SYN/ACK/FIN等数据报文，根据目标主机的反应以判断其是否存活；',
  },
  {
    prop: 'nextTime',
    label: '下次执行时间',
    minWidth: '180px',
  },
  {
    prop: 'gmtCreate',
    label: '添加时间',
    type: 'daterange',
    valueFormat: 'YYYY-MM-DD',
    minWidth: '200px',
    search: true,
    sortable: 'custom',
  },
  {
    prop: 'nextTime',
    label: '操作人',
    minWidth: '180px',
  },
  {
    label: '操作',
    width: '250px',
    fixed: 'right',
    buttons: [
      {
        title: '启动',
        icon: stop,
        eventName: 'state_stop',
        hide: function (row) {
          if (
            bottomData.has(40012) &&
            (row.status == 'none' ||
              row.status == 'finish' ||
              row.status == 'cancel')
          ) {
            return true;
          } else {
            return false;
          }
        },
      },
      {
        title: '终止',
        icon: cancel,
        eventName: 'state_cancel',
        hide: function (row) {
          if (
            bottomData.has(40012) &&
            row.status != 'none' &&
            row.status != 'finish' &&
            row.status != 'cancel'
          ) {
            return true;
          } else {
            return false;
          }
        },
      },
      {
        title: '编辑',
        disabled: function (row) {
          if (bottomData.has(400115)) {
            return false;
          } else {
            return true;
          }
        },
        eventName: 'edit',
      },
      {
        title: '删除',
        eventName: 'delete',
        disabled: function (row) {
          if (bottomData.has(400111)) {
            return false;
          } else {
            return true;
          }
        },
      },
      {
        title: '执行记录',
        eventName: 'record',
        disabled: function (row) {
          if (bottomData.has(40016)) {
            return false;
          } else {
            return true;
          }
        },
      },
    ],
  },
]);
/**
 * @description: 表格多选操作
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const selectData = ref([]);
const handleSelect = (data) => {
  selectData.value = data;
};

/**
 * @description: 获取表格数据
 * @param {*}
 * @return {*}
 */
const getTableData = async (type) => {
  let _data = JSON.parse(JSON.stringify(type))._value;
  if (_data && _data.gmtCreate) {
    let begin = _data.gmtCreate[0] + ' 00:00:00';
    let End = _data.gmtCreate[1] + ' 23:59:59';
    _data.createTimeStart = begin;
    _data.createTimeEnd = End;
    delete _data.gmtCreate;
  }
  let parms = {
    ..._data,
  };
  try {
    // openSocket('ws_detect', parms, sockets);
    const res = await getList(parms);
    if (res.code !== 200) return;
    tableData.value = res.data.records;
    total.value = res.data.total;
  } catch (error) {
    console.log(error);
  }
};
/**
 * @description: 批量删除
 * @return {*}
 * @author: tqh
 */
const handleDel = async (id, type) => {
  // @ts-ignore
  if (type == 'one') {
    delOne({
      id: id,
    }).then((res) => {
      if (res.code == 200) {
        ElMessage.success('删除成功');
        clearSelect();
        multipleTableRef.value.initData();
      }
    });
  } else {
    delAll(id).then((res) => {
      if (res.code == 200) {
        clearSelect();
        ElMessage.success('删除成功');
        multipleTableRef.value.initData();
      }
    });
  }
};
/**
 * @description 按钮点击
 */
const tableBtnClick = (btn, row) => {
  const { eventName } = btn;
  switch (eventName) {
    case 'add': // 新增
      autoBtn('add');
      break;
    case 'edit': // 编辑
      autoBtn('edit', row);
      break;
    case 'record': // 执行记录
      recordBtn('record', row);
      break;
    case 'allExecute': // 批量执行
      if (selectData.value.length == 0)
        return ElMessage.warning('请选择要批量执行的数据');
      let ids1 = selectData.value.map((item) => {
        return item.id;
      });
      let len = selectData.value.length;
      allExecuteBtn(ids1, len);
      break;
    case 'state_stop':
      executeBtn(row);
      break;
    case 'state_loading':
      executeBtn(row);
      break;
    case 'state_end':
      executeBtn(row);
      break;
    case 'state_cancel':
      cancelBtn(row);
      break;
  }
};
const getRowKey = (e) => {
  return e.id;
};
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
// 清空选择的值
const clearSelect = () => {
  multipleTableRef.value.getTableMethods().clearSelection();
};
/**
 * @description: 初始化新增数据
 */
const resetAddData = () => {
  formData.value = {
    name: '',
    targetType: 'all',
    targetList: '',
    customInput: '',
    type: '',
    detectionRange: 1,
    networkAreaCode: [],
    params: {
      detectScanConfig: {
        tcpPortScanRange: '',
        tcpPortScanType: null,
        tcpScanPort: '',
        udpScanEnable: null,
        udpScanPort: '',
      },
      detectSurviveConfig: {
        icmpPing: null,
        tcpPing: null,
        tcpPingAllPort: null,
        tcpPort: '',
        udpPing: null,
        udpPort: '',
      },
    },
  };
  tableColumn.forEach((item) => {
    if (item.showHeight == 'showHeight') {
      item.hide = true;
    }
    // if (item.prop == 'name' || item.prop == 'targetType') {
    //   item.disabled = false;
    // }
    // if (item.prop == 'networkAreaCode') {
    //   item.drawValue = '';
    //   item.hide = true;
    // }
    // if(item.prop == 'targetType') {
    //   item.drawValue = 'all'
    // }
  });
  // formDataObj.value = {};
  getRemoteScan({}).then((res) => {
    let { code, data = {} } = res || {};
    if (code == 200) {
      formData.value.params = data || {};
      tableColumn.forEach((item) => {
        // if (data.modeConfig.mode != 3) {
        //   resetDisabled(true);
        // }
        if (item.prop == 'interval') {
          item.drawValue = data.modeConfig.interval || 0;
        }
        if (item.prop == 'rate') {
          item.drawValue = data.modeConfig.rate || 0;
        }
        if (item.prop == 'retry') {
          item.drawValue = data.modeConfig.retry || 0;
        }
        if (item.prop == 'timeout') {
          item.drawValue = data.modeConfig.timeout || 0;
        }
      });
    } else {
      getModeInfo(3);
    }
  });
};
/**
 * @description: 新增/编辑提交
 * @param {'add': 新增,  'edit': '编辑'}
 */
const disabled = ref(false);
const formDataObjOne = ref({});
const autoBtn = (e, row) => {
  switch (e) {
    case 'add':
      disabled.value = false;
      resetAddData();
      break;
    case 'edit':
      formDataObjOne.value = JSON.parse(JSON.stringify(row));
      break;
  }
};
/**
 * @description: 批量执行
 */
const allExecuteBtn = (e, len) => {
  yaConfirmMessage(
    '是否开始执行这' + len + '条采集任务？',
    '提示',
    'warning'
  ).then(() => {
    executeByIds(e).then((res) => {
      if (res.code == 200) {
        clearSelect();
        ElMessage.success('任务开始执行！');
      }
    });
  });
};

/**
 * @description: 执行操作
 */
const executeBtn = (e) => {
  let send, title;
  if (e.status == 'none' || e.status == 'finish' || e.staftus == 'cancel') {
    send = execute;
    title = '任务开始执行!';
  }
  send({ id: e.id }).then((res) => {
    if (res.code == 200) {
      ElMessage.success(title);
      multipleTableRef.value.initData();
    }
  });
};
/**
 * @description: 取消执行
 */
const cancelBtn = (e) => {
  cancelDetect({ id: e.id }).then((res) => {
    if (res.code == 200) {
      ElMessage.success('任务取消！');
    }
  });
};
const formData = ref({
  name: '',
  targetType: 'all',
  targetList: '',
  type: '',
  networkAreaCode: [],
  customInput: '',
  detectionRange: 1,
  params: {
    detectScanConfig: {
      tcpPortScanRange: '',
      tcpPortScanType: null,
      tcpScanPort: '',
      udpScanEnable: null,
      udpScanPort: '',
    },
    detectSurviveConfig: {
      icmpPing: null,
      tcpPing: null,
      tcpPingAllPort: null,
      tcpPort: '',
      udpPing: null,
      udpPort: '',
    },
    modeConfig: {
      mode: null,
    },
  },
});
const showHeigh = ref(false);

/**
 * @description: 字典数据初始化
 */
const resetDictData = (e) => {
  let list = e.map((item) => {
    return {
      label: item.dictName,
      value: item.dictValue,
    };
  });
  return list;
};
/**
 * @description: 端口策略列表
 */
const toPort = () => {
  router.push({
    path: '/system/systemConfig/portStrategy',
  });
};
const detectModeList = ref([]);
const portRangeList = ref([]);
const tcpPortList = ref([]);
const tcpPortScanType = ref([]);
const getDictList = () => {
  // 网络域
  getDictTypeList({ dictType: 'networkArea' }).then((res) => {
    if (res.code == 200) {
      tableColumn.forEach((item) => {
        if (item.prop == 'networkArea' || item.prop == 'networkAreaCode') {
          item.options = resetDictData(res.data);
        }
      });
    }
  });
  // 执行方式
  getDictTypeList({ dictType: 'executeType' }).then((res) => {
    if (res.code == 200) {
      tableColumn.forEach((item) => {
        if (item.prop == 'type') {
          item.options = resetDictData(res.data);
        }
      });
    }
  });
  // 扫描模式
  getDictTypeList({ dictType: 'detectMode' }).then((res) => {
    if (res.code == 200) {
      tableColumn.forEach((item) => {
        if (item.prop == 'detectionMode') {
          item.options = resetDictData(res.data).map((jitem) => {
            jitem.value = Number(jitem.value);
            return jitem;
          });
        }
      });
    }
  });
  // 端口范围
  getDictTypeList({ dictType: 'portRange' }).then((res) => {
    if (res.code == 200) {
      portRangeList.value = resetDictData(res.data);
    }
  });
  // TCP端口扫描
  getDictTypeList({ dictType: 'portScanRange' }).then((res) => {
    if (res.code == 200) {
      tcpPortList.value = resetDictData(res.data);
    }
  });
  // tcp 端口扫描方式
  getDictTypeList({ dictType: 'tcpPortScanType' }).then((res) => {
    if (res.code == 200) {
      tcpPortScanType.value = resetDictData(res.data).map((item) => {
        item.value = Number(item.value);
        return item;
      });
    }
  });
  detectMode({}).then((res) => {
    detectModeData.value = res.data;
    getModeInfo(3);
  });
  getDeptData().then((res) => {
    if (res.code == 200) {
      tableColumn.forEach((item) => {
        if (item.prop == 'deptIdSet') {
          item.options = res.data
            ? res.data.map((item) => {
                return {
                  label: item.deptName,
                  value: item.id,
                };
              })
            : [];
        }
      });
    }
  });
};
const detectModeData = ref({});
/**
 * @description 获取默认探测模式详细参数
 */
const getModeInfo = (e) => {
  let dataObj = detectModeData.value;
  let data;
  if (e == 0) {
    data = dataObj.quick;
  } else if (e == 1) {
    data = dataObj.standard;
  } else if (e == 2) {
    data = dataObj.slow;
  } else {
    data = {
      interval: 100,
      rate: 500,
      retry: 1,
      timeout: 1,
    };
  }
  tableColumn.forEach((item) => {
    if (item.prop == 'interval') {
      item.drawValue = data.interval || 0;
    }
    if (item.prop == 'rate') {
      item.drawValue = data.rate || 0;
    }
    if (item.prop == 'retry') {
      item.drawValue = data.retry || 0;
    }
    if (item.prop == 'timeout') {
      item.drawValue = data.timeout || 0;
    }
  });
};
/**
 * @description 切换高级选项
 */
const choseOne = () => {
  showHeigh.value = !showHeigh.value;
  tableColumn.forEach((item) => {
    if (item.showHeight == 'showHeight') {
      item.hide = !item.hide;
    }
  });
};
/**
 * @description 初始化disabled
 */
const resetDisabled = (e) => {
  tableColumn.forEach((item) => {
    if (
      item.key == 'interval' ||
      item.key == 'timeout' ||
      item.key == 'rate' ||
      item.key == 'retry'
    ) {
      item.disabled = e;
    }
  });
};
/**
 * @desciption 监听扫描模式
 */
const choseSelect = (e) => {
  if (Number(e) != 3) {
    resetDisabled(true);
  } else {
    resetDisabled(false);
  }
  getModeInfo(e);
};
/**
 * @description 模板提交事件
 * @param eventName 事件名称 export: 批量导出
 * @param data 表单提交数据
 * @param cb  { Function } 组件回调  （ 新增，编辑，删除，上传需要参数: Boolean true(关闭loading,弹窗)/false(关闭loading) ）
 */
const btnSubmit = (eventName, data, cb) => {
  switch (eventName) {
    case 'batchDelete':
      let ids = selectData.value.map((item) => {
        return item.id;
      });
      handleDel(ids, 'some');
      break;
    case 'delete':
      handleDel(data.id, 'one');
      break;
    case 'add':
      handleSubmit(data, cb);
      break;
    case 'edit':
      handleSubmit(data, cb);
      break;
  }
};
/**
 * @description: 新增，编辑提交确认
 */
const handleSubmit = (data, cb) => {
  let send, title;
  if (data.id) {
    send = update;
    title = '编辑成功！';
  } else {
    send = add;
    title = '新增成功！';
  }
  let params = JSON.parse(JSON.stringify(formData.value));
  if (params.networkAreaCode) {
    params.params.networkAreaCode = params.networkAreaCode;
    delete params.networkAreaCode;
  }
  if (params.params.detectScanConfig.tcpPortScanRange != 'customize') {
    params.params.detectScanConfig.tcpScanPort = '';
  }
  if (!params.params.detectScanConfig.udpScanEnable) {
    params.params.detectScanConfig.udpScanPort = '';
  }
  if (!params.params.detectSurviveConfig.udpPing) {
    params.params.detectSurviveConfig.udpPort = '';
  }
  if (!params.params.detectSurviveConfig.tcpPing) {
    params.params.detectSurviveConfig.tcpPort = '';
  }
  params.params.modeConfig.interval = data.interval;
  params.params.modeConfig.rate = data.rate;
  params.params.modeConfig.retry = data.retry;
  params.params.modeConfig.timeout = data.timeout;
  send({
    ...params,
    ...data,
  })
    .then((res) => {
      if (res.code == 200) {
        cb(true);
        ElMessage.success(title);
        clearSelect();
      } else {
        cb(false);
      }
    })
    .catch(() => {
      cb(false);
    });
};
/**
 * @description 文件上传
 */
const handleChangeUpload = (e) => {
  let fd = new FormData();
  fd.append('file', e.raw);
  // let res = await checkoutFile(fd);
  // checkoutFile(fd).then((res) => {
  //   const reader = new FileReader()
  //   reader.readAsText(res, 'utf-8')
  //   reader.addEventListener('loadend', function () {
  //     if (typeof reader.result === 'string') {
  //       try {
  //         let data = JSON.parse(reader.result)
  //         if (data.code != 200) {
  //           yaMessage(data.message, 'error')
  //         } else {
  //           if(data.data) {
  //             defaultObj.value.targetList = data.data;
  //             resetTableData()
  //           } else {
  //             yaMessage('上传文件有误', 'error')
  //           }
  //         }
  //       } catch (error) {
  //       }
  //     }
  //   })
  // })
};
/**
 * @description 文件删除
 */
const handleDeleteFile = () => {
  console.log(123);
};
const getModelValue2 = (e) => {
  if (formData.value.type == 'custom_point') {
    formData.value.startTime = e.time;
  } else {
    formData.value.executeTime = e.time;
  }

  if (e.allWeek) {
    formData.value.typeParam = e.allWeek + ',' + e.weekDay;
  } else {
    formData.value.typeParam = e.weekDay;
  }
};
const getEditDrawerData = () => {
  formData.value = multipleTableRef.value.getEditDrawerData();
};
const getPopupList = (e, row) => {
  // let obj = e.map((item) => {
  //   return {
  //     name: item,
  //     code: row ? row.code : "",
  //   };
  // });
  // return obj;
  return [
    {
      name: 'test',
    },
  ];
};
</script>

<template>
  <div class="detectTask">
    <el-popover
            :visible="visible"
            placement="bottom"
            title="Title"
            :width="200"
            content="this is content, this is content, this is content"
          >
            <template #reference>
              <ya-button class="m-2" @click="visible = !visible"
        >Manual to activate</ya-button>
            </template>
          </el-popover>
    <YaPageContent
      ref="multipleTableRef"
      :total="total"
      :tableData="tableData"
      :row-key="getRowKey"
      :tableColumns="tableColumn"
      :buttons="Buttons"
      @submit="btnSubmit"
      @init="getTableData"
      @tableBtnClick="tableBtnClick"
      @selectionChange="handleSelect"
      drawerSize="480px"
    >
      <!-- 探测范围 -->
      <template #detectionRangeTable="{ item }">
        <div class="text-color">123</div>
      </template>
      <!-- 新增探测范围 -->
      <template #detectionRange="{ item }">
        <div style="width: 100%" v-if="formData.detectionRange == 1">
          <el-input
            class="customInput"
            v-model="formData.customInput"
            :autosize="{ minRows: 6 }"
            type="textarea"
            placeholder="输入格式如下，多个IP、域名、URL用英文逗号隔开：
  IPv4：192.169.1.1,192.168.1.0-192.168.1.255,192.168.1.1/24
  IPv6：FF01:0:0:0:0:0:0:1101,FF01::1101
  域名：www.123k.com,www.345d.com
  URL：https://123.com,http://234.com"
          />
          <div class="yaInputUpload">
            <YaInputUpload
              @handleChangeUpload="handleChangeUpload"
              @handleDeleteFile="handleDeleteFile"
              :pass="[
                'xlsx',
                'jpg',
                'png',
                'pdf',
                'txt',
                'xls',
                'doc',
                'docx',
                'rar',
                'zip',
                'wps',
                'pptx',
              ]"
            >
            </YaInputUpload>
          </div>
        </div>
      </template>
      <template #schedule="{ item }">
        <div class="schedule">
          <div class="schedule-item"></div>
          <div class="schedule-text">10%</div>
        </div>
      </template>
      <!-- 引擎-网络域 -->
      <template #networkAreaEngine="{ item }">
        <div class="networkAreaEngine">
          <div class="networkAreaEngine-item">引擎-B域</div>
          <el-popover
            :visible="visible"
            placement="bottom"
            title="Title"
            :width="200"
            content="this is content, this is content, this is content"
          >
            <template #reference>
              <div class="networkAreaEngine-item" @click.stop="visible = !visible">+3</div>
            </template>
          </el-popover>
        </div>
      </template>
      <!-- 执行状态 -->
      <template #status="{ item }">
        <div class="status">
          <span class="status-label"></span>
          <span class="status-content">未开始</span>
        </div>
      </template>
      <!-- 最新结果 -->
      <template #result="item">
        <div class="result">
          <span class="survival">1000</span>
          <span class="error">9999</span>
        </div>
      </template>
      <template #type="{ item }">
        <AddPopUp
          v-if="formData.type != 'manual' && formData.type"
          ref="refAddPopUp"
          :showType="1"
          :isShow="formData.type"
          @dateValue="getModelValue2"
          :dataValue="formDataObjOne"
        />
      </template>
      <!-- 高级选项 -->
      <template #levelHeight="{ item }">
        <div class="level-height level-height1">
          <div class="position-relative">
            <span @click="choseOne">
              <span class="heighi-btn">高级选项</span>
              <span class="heighi-btn-icon" v-if="!showHeigh"></span>
              <span
                class="heighi-btn-icon heighi-btn-icon-up"
                v-if="showHeigh"
              ></span>
            </span>
          </div>
        </div>
      </template>
      <!-- TCP端口扫描 -->
      <template #levelHeightinfo="{ item }">
        <div class="flex-bt-x" v-for="item in tcpPortList">
          <el-radio
            v-model="formData.params.detectScanConfig.tcpPortScanRange"
            :label="item.value"
          >
            <span>{{ item.label }}</span>
          </el-radio>
          <div
            v-if="item.value == 'standard'"
            class="port-list"
            @click="toPort"
          >
            编辑端口服务列表
          </div>
          <div v-if="item.value == 'customize'" class="m-l-8 flex-one">
            <el-input
              v-model="formData.params.detectScanConfig.tcpScanPort"
              placeholder="请输入1-65535"
            ></el-input>
          </div>
        </div>
      </template>
      <!-- tcp端口扫描方式 -->
      <template #tcpPortType>
        <!-- TCP端口扫描方式 -->
        <div class="level-top radio-block">
          <el-radio-group
            v-model="formData.params.detectScanConfig.tcpPortScanType"
          >
            <el-radio v-for="item in tcpPortScanType" :label="item.value">
              <span>{{ item.label }}</span>
            </el-radio>
          </el-radio-group>
        </div>
      </template>
      <!-- UDP扫描端口 -->
      <template #udpPort>
        <div class="level-top" style="width: 100%">
          <div class="scan-port">
            <span class="scan-port-chose"
              ><el-switch
                v-model="formData.params.detectScanConfig.udpScanEnable"
            /></span>
            <span
              class="flex-one"
              v-if="formData.params.detectScanConfig.udpScanEnable"
            >
              <el-input
                v-model="formData.params.detectScanConfig.udpScanPort"
                placeholder="请输入1-65535"
              ></el-input>
            </span>
          </div>
        </div>
      </template>
      <!-- 探活方式 -->
      <template #exploratoryMode>
        <div class="level-top">
          <el-checkbox
            disabled
            v-model="formData.params.detectSurviveConfig.icmpPing"
            label="true"
            >ICMP PING</el-checkbox
          >
          <div class="mb-10 flex-bt-x">
            <el-checkbox
              v-model="formData.params.detectSurviveConfig.udpPing"
              label="true"
            >
              UDP PING端口
            </el-checkbox>
            <div class="m-l-15">
              <el-input
                v-model="formData.params.detectSurviveConfig.udpPort"
                placeholder="请输入1-65535"
              ></el-input>
            </div>
          </div>
          <div class="mb-10 flex-bt-x">
            <el-checkbox
              v-model="formData.params.detectSurviveConfig.tcpPing"
              label="true"
              :disabled="
                formData.params.detectSurviveConfig.tcpPingAllPort
                  ? true
                  : false
              "
            >
              TCP PING端口
            </el-checkbox>
            <div class="m-l-16">
              <el-input
                v-model="formData.params.detectSurviveConfig.tcpPort"
                placeholder="请输入1-65535"
              ></el-input>
            </div>
          </div>
          <el-checkbox
            v-model="formData.params.detectSurviveConfig.tcpPingAllPort"
            :disabled="
              formData.params.detectSurviveConfig.tcpPing ? true : false
            "
            label="true"
            >TCP PING全端口</el-checkbox
          >
        </div>
      </template>
    </YaPageContent>
  </div>
</template>

<style lang="scss" scoped>
.yaInputUpload {
  width: 100%;
}
.customInput {
  margin: 12px 0;
}
.detectTask {
  .targetName {
    font-weight: 400;
    color: var(--el-color-primary);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
    .targetNameone {
      max-width: 180px;
      overflow: hidden;
    }
    .span {
      background: rgba(0, 149, 255, 0.12);
      border-radius: 4px;
      padding: 2px 5px;
      line-height: 15px;
      margin-left: 5px;
      position: relative;
      top: 10px;
      height: 20px;
      min-width: 34px;
    }
  }
}
.text-color {
  text-decoration: underline;
  color: var(--el-color-primary);
}
.status {
  display: flex;
  align-items: center;
  .status-label {
    width: 8px;
    height: 8px;
    background: var(--el-color-success);
    border-radius: 50%;
    margin-right: 8px;
  }
  .status-info {
    background: var(--el-color-info);
  }
  .status-waring {
    background: var(--el-color-warning);
  }
}
.schedule {
  width: 100%;
  height: 16px;
  background: rgba(229,229,229,0.6);
  border-radius: 2px;
  position: relative;
  .schedule-item {
    position: absolute;
    background: var(--el-color-primary);
    left: 0;
    height: 16px;
    width: 100%;
    border-radius: 2px;
  }
  .schedule-text {
    height: 16px;
    line-height: 16px;
    position: relative;
    z-index: 2
  }
}
.result {
  display: flex;
  span {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 14px;
  }
  span:nth-child(2) {
    margin-left: 8px;
  }
  .survival {
    border: 1px solid var(--el-color-success);
    color: var(--el-color-success);
  }
  .error {
    border: 1px solid rgba(229, 229, 229, 1);
  }
}
.level-height {
  position: relative;
  top: -10px;
  font-size: var(--el-form-label-font-size);
  color: var(--el-text-color-primary);
  width: 100%;
  .level-top {
    ::v-deep .el-checkbox {
      margin-bottom: 10px;
    }
  }
  .heighi-btn {
    font-weight: 500;
    color: var(--el-color-primary);
    text-decoration: underline;
    cursor: pointer;
  }

  .position-relative {
    position: relative;
  }

  .heighi-btn-icon {
    width: 0;
    height: 0;
    border-top: 5px solid var(--el-color-primary);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position: absolute;
    top: 13px;
    left: 70px;
    cursor: pointer;
  }

  .heighi-btn-icon-up {
    border-top: none;
    border-bottom: 5px solid var(--el-color-primary);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
  }
}
.level-height1 {
  top: 0;
}
::v-deep .ya-form .el-input {
  width: 100%;
}
.maring-top13 {
  margin-top: 13px;
}
::v-deep .el-radio {
  margin-bottom: 5px;
  margin-right: 5px;
}
::v-deep .el-radio__label,
::v-deep .el-checkbox__label {
  margin-left: 5px;
  // color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: 400;
}

.m-l-15 {
  margin-left: 15px;
}

.m-l-16 {
  margin-left: 16px;
}

.port-list {
  color: var(--el-color-primary);
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
}
.scan-port {
  display: flex;
  .scan-port-chose {
    margin-right: 15px;
  }
}

.ping-port {
  ::v-deep .el-input {
    width: 94%;
  }
}

.radio-block {
  ::v-deep .el-radio {
    margin-right: 130px;
  }
}

.flex-bt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.flex-one {
  flex: 1;
}

.m-l-8 {
  margin-left: 8px;
}

::v-deep .tooltip-container {
  flex: 1;
}
.ya-name {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: pre-wrap;
}

.flex-slot {
  display: flex;
  align-items: center;
  .level-top {
    flex: 1;
    margin-left: 16px;
  }
}
.flex-bt-x {
  display: flex;
}
::v-deep .add-form > div > div {
  margin-top: 16px;
}
.networkAreaEngine {
  display: flex;
  position: relative;
  z-index: 11;
  .networkAreaEngine-item {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--el-color-primary);
    color: var(--el-color-primary);
    margin-right: 8px;
  }
}
</style>
